<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>UniversityXP</title>
		<link href="css/custom-theme/jquery-ui-1.8.21.custom.css" type="text/css" rel="stylesheet"/>
		<link href="css/common.css" rel="stylesheet" type="text/css"/>
		<link href="css/custom.css" rel="stylesheet" type="text/css" />
		<link href="css/UI.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="js/jquery1.7.2.js"></script>
        <script src="js/slides.min.jquery.js"></script>
        <script src="js/jquery-ui-1.8.20.custom.min.js"></script>
         <style type="text/css" media="screen">
            .slides_container {
                width:954px;
                height:370px;
            }
            .slides_container div {
                width:100%;
                display:block;
            }
        </style>
        <script type="text/javascript">
          $(function(){
          
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true,
animationStart: function(current){
$('.caption').animate({
bottom:-35
},100);
if (window.console && console.log) {
// example return of current slide number
console.log('animationStart on slide: ', current);
};
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
if (window.console && console.log) {
// example return of current slide number
console.log('animationComplete on slide: ', current);
};
},
slidesLoaded: function() {
$('.caption').animate({
bottom:0
},200);
}
});
}); 

	$(function() {
		$( "#tabs" ).tabs();
	});
	$(document).ready(function(){
    $("input:text, textarea, input:password").each(function(){
        if(this.value == '')
            this.value = this.title;
    });
    $("input:text, textarea, input:password").focus(function(){
        if(this.value == this.title)
            this.value = '';
    });
    $("input:text, textarea, input:password").blur(function(){
        if(this.value == '')
            this.value = this.title;
    });
    $("input:image, input:button, input:submit").click(function(){
        $(this.form.elements).each(function(){
            if(this.type =='text' || this.type =='textarea' || this.type =='password' ){
                if(this.value == this.title && this.title != ''){
                    this.value='';
                }
            }
        });
    });
});

		</script>
		
		<script type="text/javascript">
		$(document).ready(function(){
			$('#header').load('common/header.html','',function(){
				$("#header .menu li a").removeClass("current_page");
          		$("a#index").addClass("current_page");
			});
			$('#footer').load('common/footer.html');
		});
		</script>
	</head>
	<body>
		<div id="header">
		
			</div>
			
				
			<div id="banner">
			 <div id="slides">
			 	<a href="#" class="prev"><img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
				<a href="#" class="next"><img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
            	<div class="slides_container">
                <div>
                    <img src="img/banner1.jpg">
                </div>
                <div>
                    <img src="img/banner2.jpg">
                    <div class="caption" style="bottom:0">
							<p>Happy Bokeh Thursday!</p>
						</div>
                </div>
                <div>
                    <img src="img/banner3.jpg">
                    <div class="caption" style="bottom:0">
							<p>Happy Bokeh raining Day!</p>
						</div>
                </div>
                <div>
                    <img src="img/banner4.jpg">
                    <div class="caption" style="bottom:0">
							<p>What shall I say?</p>
						</div>
                </div>
                   <div>
                    <img src="img/banner4.jpg">
                    <div class="caption" style="bottom:0">
							<p>What shall I say?</p>
						</div>
                </div>
                   <div>
                    <img src="img/banner4.jpg">
                    <div class="caption" style="bottom:0">
							<p>What shall I say?</p>
						</div>
                </div>
            	</div>
        	</div>
			<img src="img/shadow.png" width="949" height="45" alt="shadow" id="frame">
			</div>
			
			
			<div id="welcome">
				<div id="signupContainer">
				<p id="welcomeTitle">Welcome igator! You can <a href="javascript:;" onclick="login();">Sign in</a> or</p>
				<a id="signBtn" href="javascript:;" onclick="signup();">Sign up now!</a>
				</div>
				<p id="details">
					We are glad that you've found your way here as this website was specifically designed to fit some of your needs and interests. This website will help you meet some of your fellow peers in a way that you can form long lasting bonds and network your way to success. We are striving to provide you with  the ultimate college experience. There's much to do on here so get started and as always <em>GO IGATOR!</em>
				</p>
			</div>
			
			<div id="content">
				<div id="content_container">
					<div id="tabsContainer">
					<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Latest News</a></li>
		<li><a href="#tabs-2">Top 5 Books</a></li>
		<li><a href="#tabs-3">Top 5 Restaurants</a></li>
	</ul>
	<div id="tabs-1">
		<p>
			<ul id="latestNews">
				<li><img src="img/newsImg.png"><p>UF researchers name new extinct giant turtle found near world’s largest snake</p></li>
				<li><img src="img/newsImg.png"><p>UF researchers name new extinct giant turtle found near world’s largest snake</p></li>
				<li><img src="img/newsImg.png"><p>UF researchers name new extinct giant turtle found near world’s largest snake</p></li>
				<li><img src="img/newsImg.png"><p>UF researchers name new extinct giant turtle found near world’s largest snake</p></li>
				<li><img src="img/newsImg.png"><p>UF researchers name new extinct giant turtle found near world’s largest snake</p></li>
			</ul>
		</p>
	</div>
	<div id="tabs-2">
		<p><ul id="topBooks">
				<li><img src="img/bookImg.png"><p>UF researchers name new extinct giant turtle found near world’s largest snake</p></li>
				<li><img src="img/bookImg.png"><p>UF researchers name new extinct giant turtle found near world’s largest snake</p></li>
				<li><img src="img/bookImg.png"><p>UF researchers name new extinct giant turtle found near world’s largest snake</p></li>
				<li><img src="img/bookImg.png"><p>UF researchers name new extinct giant turtle found near world’s largest snake</p></li>
				<li><img src="img/bookImg.png"><p>UF researchers name new extinct giant turtle found near world’s largest snake</p></li>
			</ul>
		</p>
	</div>
	<div id="tabs-3">
		<p><ul id="topRestaurant">
				<li><img src="img/restaurantImg.png"><p>UF researchers name new extinct giant turtle found near world’s largest snake</p></li>
				<li><img src="img/restaurantImg.png"><p>UF researchers name new extinct giant turtle found near world’s largest snake</p></li>
				<li><img src="img/restaurantImg.png"><p>UF researchers name new extinct giant turtle found near world’s largest snake</p></li>
				<li><img src="img/restaurantImg.png"><p>UF researchers name new extinct giant turtle found near world’s largest snake</p></li>
				<li><img src="img/restaurantImg.png"><p>UF researchers name new extinct giant turtle found near world’s largest snake</p></li>
			</ul>
		</p>
		</div>
</div>
</div>
			<div id="rightPart">
			<div id="intro" class="ui-corner-all"><h1>What we do?</h1>
				<p>We equip businesses with the creative, multimedia & digital strategy required to hone specific business objectives, aggressively.Quickly compel your consumers to make decisions, using online posters designed to cut through the grey and convert the masses.</p>
				<p>
					<a href="#" id="btn1">Need a book?</a>
					<a href="#" id="btn2">Need a restaurant?</a>
				</p>
			</div>
			<div id="about" class="ui-corner-all"><h1>About us</h1>
				<img src="img/aboutImg.png"/>
				<p>We equip businesses with the creative, multimedia & digital strategy required to hone specific business objectives, aggressively.Quickly compel your consumers to make decisions, using online posters designed to cut through the grey and convert the masses.</p>
			</div>
			</div>
				</div>
			</div>
		<div id="footer">
			<div class="container">
				<p>Igator&copy;Copyright 2012. All Rights Reserved.</p>
				<div id="social">
				<a id="facebook" href="#"></a>
				<a id="tweet" href="#"></a>
			</div>
			</div>
		</div>

<style type="text/css">
.ltt{border-bottom:1px dashed #CCCCCC}
#loginbox{width:360px; height:350px; padding:10px; background:#FFFFFF;position:absolute}
#signupbox{width:360px; height:450px; padding:10px; background:#FFFFFF;position:absolute}
.tss{height:80px; font-size:15px; font-family:Arial, Helvetica, sans-serif; color:#999999; font-weight:bold}
.tss_Delbold{font-weight:normal;}
.tss_Delbold span{margin:0 0 0 5px;}
.tss_Delbold p{margin:0 0 10px 0;}
.ltt{margin-bottom:10px;}
.sf{width:260px; height:25px; line-height:25px}
.sfp{width:300px; height:25px; line-height:25px}
.showshade{background:url(images/ui-bg_diagonals-thick_20_666666_40x40.png) repeat;opacity:0.5;filter:Alpha(Opacity=50); BACKGROUND: url(images/ui-bg_diagonals-thick_20_666666_40x40.png) #666666 50% 50%; position:absolute; z-index:10000}
.closea{float:right; display:block; background:url(css/custom-theme/images/ui-icons_ef8c08_256x240.png) no-repeat -96px -128px; width:16px; height:16px; text-decoration:none}
a.closea:hover{background:url(images/ui-icons_ffffff_256x240.png) no-repeat -96px -128px; background-color:#F7AF3A}
.tsd a{text-decoration:none; color:#3D469A}
.tsd.addline img{margin-bottom:10px;}
.tsd.addline a{text-decoration:underline;}
</style>
<div class="login" id="loginbox" style="display:none">
	<div class="ltt clearfix"><a class="closea" href="javascript:;" onclick="closef();" onfocus="this.blur();">&nbsp;</a><img src="img/login_t.png" /></div>
	<div class="tss tss_Delbold "><p>Username:</p><input type="text" class="sf" value="" name="uname" /><span>@edu.com</span></div>
	<div class="tss tss_Delbold"><p>Password:</p><input type="password" class="sfp" /></div>
	<div class="tsd addline"><img src="img/login_sin.png" /><br /><a href="javascript:;" onclick="signreg()">sign up a account</a></div>
</div>
<div class="signup" id="signupbox" style="display:none">
	<div class="ltt clearfix"><a class="closea" href="javascript:;" onclick="closeg();" onfocus="this.blur();">&nbsp;</a><img src="img/login_t.png" /></div>
	<div class="tss tss_Delbold"><p>Username:</p><input type="text" class="sf" value="" name="uname" /><span>@edu.com</span></div>
	<div class="tss tss_Delbold"><p>Password:</p><input type="password" class="sfp" /></div>
	<div class="tss tss_Delbold"><p>Confrim Password:</p><input type="password" class="sfp" /></div>
	<div class="tsd addline"><img src="img/login_sinup.png" /><br /><a href="javascript:;" onclick="regsign()">sign in</a></div>
</div>
<script type="text/javascript">
function signreg(){
	$("#loginbox").hide();
	$(".showshade").hide();
	signup();
}
function regsign(){
	$("#signupbox").hide();
	$(".showshade").hide();
	login();
}
function closef(){
	$("#loginbox").hide();
	$(".showshade").hide();
}
function closeg(){
	$("#signupbox").hide();
	$(".showshade").hide();
}
function popup(popupName){
	var _scrollHeight = $(document).scrollTop(),//获取当前窗口距离页面顶部高度
	_windowHeight = $(window).height(),//获取当前窗口高度
	_windowWidth = $(window).width(),//获取当前窗口宽度
	_popupHeight = popupName.height(),//获取弹出层高度
	_popupWeight = popupName.width();//获取弹出层宽度
	_posiTop = (_windowHeight - _popupHeight)/2 + _scrollHeight;
	_posiLeft = (_windowWidth - _popupWeight)/2;
	$("body").append("<div class='showshade'></div>");
	$(".showshade").css({"left": "0px","top":"0px","width":"100%","height":$(document.body).height()+"px"});
	popupName.css({"left": _posiLeft + "px","top":_posiTop + "px","display":"block","z-index":"10001"});//设置position
}
function login(){
	popup($("#loginbox"));
}
function signup(){
	popup($("#signupbox"));
}
</script>
	</body>
</html>
